<template>
  <div>
    <el-form :model="formData" label-width="100px" ref="form" :rules="rules">
      <el-form-item label="设备ID">
        {{ detail.deviceid }}
      </el-form-item>
      <el-form-item label="分路名称">
        {{ detail.title }}({{ detail.ln }})
      </el-form-item>
      <el-form-item label="限定电能" prop="elecmax">
        <el-tooltip
          class="item"
          effect="dark"
          content="0-1000"
          placement="top-start"
        >
          <el-input v-model="formData.elecmax" placeholder=""></el-input>
        </el-tooltip>
      </el-form-item>
      <el-form-item label="限定负载" prop="loadmax">
        <el-tooltip
          class="item"
          effect="dark"
          content="100-38000"
          placement="top-start"
        >
          <el-input v-model="formData.loadmax" placeholder=""></el-input>
        </el-tooltip>
      </el-form-item>
      <el-form-item label="最大电流" prop="currmax">
        <el-tooltip content="5-100" placement="top-start">
          <el-input v-model="formData.currmax" placeholder=""></el-input>
        </el-tooltip>
      </el-form-item>
      <el-form-item label="超温保护" prop="tempmax">
        <el-tooltip content="0-120" placement="top-start">
          <el-input v-model="formData.tempmax" placeholder=""></el-input>
        </el-tooltip>
      </el-form-item>
      <el-form-item label="过压" prop="voltmax">
        <el-tooltip content="260-475" placement="top-start">
          <el-input v-model="formData.voltmax" placeholder=""></el-input>
        </el-tooltip>
      </el-form-item>
      <el-form-item label="欠压" prop="voltmin">
        <el-tooltip content="50-315" placement="top-start">
          <el-input v-model="formData.voltmin" placeholder=""></el-input>
        </el-tooltip>
      </el-form-item>
      <el-form-item label="检测" prop="leakage">
        <el-switch v-model="formData.leakage"></el-switch>
      </el-form-item>
      <el-form-item label="检测定时" v-if="formData.leakage">
        <el-select v-model="day" placeholder="日" style="width: 100px;">
          <el-option
            v-for="(item, index) in genNum(31, false)"
            :value="item"
            :label="item"
            :key="index"
          ></el-option> </el-select
        >日
        <el-select v-model="hour" placeholder="日" style="width: 100px;">
          <el-option
            v-for="(item, index) in genNum(60, true)"
            :value="item"
            :label="item"
            :key="index"
          ></el-option> </el-select
        >时
        <el-select v-model="minute" placeholder="日" style="width: 100px;">
          <el-option
            v-for="(item, index) in genNum(60, true)"
            :value="item"
            :label="item"
            :key="index"
          ></el-option> </el-select
        >分
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getsubset } from '@/api/equipment/subdevice.js';
import { opertioncmd02, sendsubset } from '@/api/ws/cmdoper.js';
import { mapGetters } from 'vuex';

export default {
  props: ['data', 'visible'],
  watch: {
    data: {
      handler: function (val) {
        if (val) {
          console.log(val);
          this.query.deviceid = val.deviceid;
          this.query.lnid = val.lnid;
          //opertioncmd02(val.deviceid, val.lnid, 'getsomeparam', 'CMD-2', 1);
          this.getData();
        }
      },
      immediate: true,
    },
    deviceparaminfo: {
      handler: function (val) {
        if (val.desired) {
          let formData = {};
          val.desired.arrays.forEach((item) => {
            console.log(item.device.id, this.query.lnid);
            if (item.device.id == this.query.lnid) {
              formData = item.getparam;
            }
          });
          this.formData.elecmax = formData.elecmax;
          this.formData.loadmax = formData.loadmax;
          this.formData.currmax = formData.currmax;
          this.formData.tempmax = formData.tempmax;
          this.formData.voltmax = formData.voltmax;
          this.formData.voltmin = formData.voltmin;
          this.formData.leakage = formData.leakage;
          this.formData.leaktime = formData.leaktime;
          this.day = '';
          this.hour = '';
          this.minute = '';
          if (typeof this.formData.leaktime == 'string') {
            let time = this.formData.leaktime.split(':');
            this.day = time[0];
            this.hour = time[1];
            this.minute = time[2];
          }

          clearInterval(this.cmdhandler); // 这个数据有了就不用再多请求了。
          this.hasData = true; 
        }
      },
      immediate: true,
      deep: true,
    },
    visible: {
      handler: function (val) {
        if (!val) {
          clearInterval(this.cmdhandler);
          this.formData.elecmax = ''
          this.formData.loadmax = ''
          this.formData.currmax = ''
          this.formData.tempmax = ''
          this.formData.voltmax = ''
          this.formData.voltmin = ''
          this.formData.leakage = ''
          this.formData.leaktime = ''
          this.day = '';
          this.hour = '';
          this.minute = '';
          this.hasData = false;
        } else {
          //这里的数据是设置的数据 只要不变动就没必要一直请求 因此这个明天要优化一下，只要请求到数据，就关闭。
          opertioncmd02(
              this.query.deviceid,
              this.query.lnid,
              'getsomeparam',
              'CMD-2',
              1
          );
          this.cmdhandler = setInterval(() => {
            if(this.hasData) return; //有数据就算了
            opertioncmd02(
              this.query.deviceid,
              this.query.lnid,
              'getsomeparam',
              'CMD-2',
              1
            );
          }, 6000);
        }
      },
      immediate: true,
    },
  },
  computed: {
    ...mapGetters(['deviceparaminfo']),
  },
  data() {
    return {
      hasData:false, //用来控制是否需要继续发送数据
      cmdhandler:null,
      query: {},
      formData: {
        elecmax: '',
        loadmax: '',
        currmax: '',
        tempmax: '',
        voltmax: '',
        voltmin: '',
        leakage: '',
        leaktime: '',
      },
      day: '',
      hour: '',
      minute: '',
      detail: {},
      deviceArr: {},
      subsetDetail: {},

      rules: {
        elecmax: [
          { required: true, message: '请设置限定电能', trigger: 'blur' },
          { validator: this.checkNum, min: 0, max: 1000 },
        ],
        loadmax: [
          { required: true, message: '请设置限定负载', trigger: 'blur' },
          { validator: this.checkNum, min: 100, max: 38000 },
        ],
        currmax: [
          { required: true, message: '请设置最大电流', trigger: 'blur' },
          { validator: this.checkNum, min: 5, max: 100 },
        ],
        tempmax: [
          { required: true, message: '请设置超温保护', trigger: 'blur' },
          { validator: this.checkNum, min: 0, max: 120 },
        ],
        voltmax: [
          { required: true, message: '请设置过压', trigger: 'blur' },
          { validator: this.checkNum, min: 260, max: 475 },
        ],
        voltmin: [
          { required: true, message: '请设置欠压', trigger: 'blur' },
          { validator: this.checkNum, min: 50, max: 315 },
        ],
      },
    };
  },
  methods: {
    getData() {
      getsubset(this.query).then((res) => {
        this.detail = res.data.detail;
        this.deviceArr = res.data.deviceArr;
        this.subsetDetail = res.data.subsetDetail;
      });
    },
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.formData.leaktime =
            this.day + ':' + this.hour + ':' + this.minute;
          sendsubset(
            this.detail.deviceid,
            this.detail.lnid,
            1,
            this.formData.elecmax,
            this.formData.currmax,
            this.formData.loadmax,
            this.formData.tempmax,
            this.formData.voltmax,
            this.formData.voltmin,
            this.formData.leakage,
            this.formData.leaktime
          );
          //下面这个 看看后面再说，兴许是没用的
          // $.post(
          //   '<?=url("subdevices/subset")?>',
          //   $('#subsetid').serialize(),
          //   function (data) {
          //     return true;
          //   },
          //   'json'
          // );
        }
      });
    },
    checkNum(rule, value, callback) {
      if (isNaN(value)) {
        callback('不是数字');
      } else {
        value = parseInt(value);
        if (value < rule.min) {
          callback('不能小于' + rule.min);
        }
        if (value > rule.max) {
          callback('不能大于' + rule.max);
        }
      }
      callback(); //正确的时候也需要调用这个不然无法继续执行
    },
    genNum(max, zero) {
      let num;
      if (zero) {
        num = [0];
      } else {
        num = [];
      }

      for (let i = 1; i < max; i++) {
        num.push(i);
      }
      return num;
    },
  },
};
</script>

<style scoped></style>
